<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset=utf-8>
    <meta name="viewport"
        content="width=device-width,initial-scale=0.7,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
    <title>mobile-drag-drop demo</title>
    <link rel="stylesheet" href="demo.css">
    <script src="./release/index.min.js"></script>
    <script src="./release/scroll-behaviour.min.js"></script>
</head>

<body>
    <div id="wrapper">
        <article>
            <div id="bin">
                <div id="innerBin"></div>
            </div>
            <ul>
                <li><a href="#" id="one"><span style="display: inline-block; background: lightblue">one</span></a></li>
                <li><a href="#" id="two">two</a></li>
                <li><a href="#" id="three">three</a></li>
                <li><a href="#" id="four">four</a></li>
                <li><a href="#" id="five">five</a></li>
                <li>
                    <a id="six">six
                        <label>
                            nested select
                            <select>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </label>
                    </a>
                </li>
                <li>
                    <a id="seven">seven
                        <label>
                            nested input
                            <input type="text" />
                        </label>
                    </a>
                    <a id="nine">nine
                        <label>
                            nested input
                            <input type="radio" />
                        </label>
                    </a>
                    <a id="ten">ten
                        <label>
                            nested input
                            <input type="checkbox" />
                        </label>
                    </a>
                </li>
                <li>
                    <a id="eight">eight
                        <label>
                            nested textarea
                            <textarea>Blub</textarea>
                        </label>
                    </a>
                </li>
            </ul>
            <hr />

            <script>
                var threshold = 10;
                var startX, startY;

                var allowHorizontalDragOnly = function (event) {

                    var touch = event.touches[0];

                    if (startX === undefined || startY === undefined) {
                        startX = touch.clientX;
                        startY = touch.clientY;

                        // we are uncertain if we shall start a drag operation.. return undefined
                        return;
                    }

                    var deltaX = Math.abs(startX - touch.clientX),
                        deltaY = Math.abs(startY - touch.clientY);

                    console.log("startX: " + startX);
                    console.log("startY: " + startY);

                    console.log("deltaX: " + deltaX);
                    console.log("deltaY: " + deltaY);

                    if (deltaX > threshold || deltaY > threshold) {

                        console.log("threshold reached.");

                        // reset our initial values
                        startX = undefined;
                        startY = undefined;

                        if (deltaX > deltaY) {

                            console.log('horizontal drag detected, starting drag');
                            // we know for sure to start it, return true
                            return true;
                        }
                        else {

                            console.log('vertical scroll detected, aborting drag');
                            // we know for sure to abort it, return false
                            return false;
                        }
                    }
                };

                var polyfillApplied = MobileDragDrop.polyfill({
                    //            dragImageCenterOnTouch: true,
                    //            dragImageOffset: {
                    //                x: 0,
                    //                y: 0
                    //            },
                    //            dragStartConditionOverride: allowHorizontalDragOnly, 
                    dragImageTranslateOverride: MobileDragDrop.scrollBehaviourDragImageTranslateOverride,
                });

                /**
                 * ---------------------------------------------------------------------------------------------------------
                 */

                var missed = ['hey!', 'missed it :(', 'that was close..', 'ARRRR'];
                var eat = ['yum!', 'gulp', 'burp!', 'nom'];
                var yum = document.createElement('p');

                /**
                 * ------------------垃圾s------------------------------------------------------------------------------
                 */

                var links = document.querySelectorAll('li > a'), el = null;
                for (var i = 0; i < links.length; i++) {
                    el = links[i];

                    el.setAttribute('draggable', 'true');

                    el.addEventListener('dragstart', function (e) {
                        console.log('dragstart');

                        // e.dataTransfer.effectAllowed = 'copyLink';

                        //TODO fails on desktop safari because drag is immediately aborted
                        //                this.style.display = "none";

                        console.log('setting data: ' + this.id);

                        e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
                    });

                    el.addEventListener('drag', function (e) {
                        console.log('drag');
                    });

                    el.addEventListener('dragend', function (e) {
                        console.log('dragend with effect: ' + e.dataTransfer.dropEffect);
                    });

                    el.addEventListener('click', function (e) {
                        console.log('clicked on draggable');

                        console.log('click offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);
                    });

                    // Custom event fires only if holdToDrag is true
                    el.addEventListener('dnd-poly-dragstart-pending', function (e) {
                        console.log('dnd-poly-dragstart-pending');

                        e.preventDefault();
                        e.stopPropagation(); // stop it here to prevent it bubble up
                    });

                    el.addEventListener('dnd-poly-dragstart-cancel', function (e) {
                        console.log('dnd-poly-dragstart-cancel');

                        e.preventDefault();
                        e.stopPropagation(); // stop it here to prevent it bubble up
                    });
                }


                /**
                 * -----------垃圾桶------------------------------------------------------------------------------------
                 */

                var bin = document.querySelector('#bin');

                bin.addEventListener('dragenter', function (e) {
                    console.log('bin dragenter');

                    console.log('bin offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);

                    e.preventDefault();
                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.add('over');

                });

                bin.addEventListener('dragover', function (e) {
                    console.log('bin dragover');

                    console.log('bin offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);

                    e.preventDefault(); // allows us to drop
                    e.stopPropagation(); // stop it here to prevent it bubble up

                    e.dataTransfer.dropEffect = 'link'; // we have to set it for firefox to be happy
                });

                bin.addEventListener('dragexit', function (e) {
                    console.log('bin dragexit');

                    console.log('bin offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);

                    e.stopPropagation(); // stop it here to prevent it bubble up
                });

                bin.addEventListener('dragleave', function (e) {
                    console.log('bin dragleave');

                    console.log('bin offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);

                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.remove('over');
                });

                bin.addEventListener('drop', function (e) {
                    console.log('bin drop');

                    console.log('bin offsetX, offsetY: ' + e.offsetX + ", " + e.offsetY);

                    e.stopPropagation(); // stop it here to prevent it bubble up

                    // stupid nom text + fade effect
                    yum.innerHTML = missed[parseInt(Math.random() * missed.length)];

                    var y = yum.cloneNode(true);
                    bin.appendChild(y);

                    setTimeout(function () {
                        y.classList.add('fadeout');
                    }, 250);
                });

                /**
                 * ---------------------------------------------------------------------------------------------------------
                 */

                var innerBin = document.querySelector('#innerBin');

                bin.classList.add('zoom');

                innerBin.addEventListener('dragenter', function (e) {
                    console.log('apperture dragenter');

                    e.preventDefault();
                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.add('in');
                });

                innerBin.addEventListener('dragover', function (e) {
                    console.log('apperture dragover');

                    e.preventDefault(); // allows us to drop
                    e.stopPropagation(); // stop it here to prevent it bubble up

                    e.dataTransfer.dropEffect = 'copy';
                });

                innerBin.addEventListener('dragexit', function (e) {
                    console.log('apperture dragexit');

                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.remove('in');
                });

                innerBin.addEventListener('dragleave', function (e) {
                    console.log('apperture dragleave');

                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.remove('in');
                });

                innerBin.addEventListener('drop', function (e) {
                    console.log('apperture drop');

                    e.stopPropagation(); // stop it here to prevent it bubble up

                    bin.classList.remove('in');

                    var el = document.getElementById(e.dataTransfer.getData('Text'));

                    el.parentNode.removeChild(el);

                    // stupid nom text + fade effect
                    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

                    var y = yum.cloneNode(true);
                    bin.appendChild(y);

                    setTimeout(function () {
                        y.classList.add('fadeout');
                    }, 250);
                });

                try {
                    window.addEventListener('touchmove', function () {
                    }, { passive: false })
                } catch (e) { }


            </script>
    </div>


</body>

</html>